<template>
  <!-- 数据列表 开始-->

  <article v-if="data.total > 0" class="comm-course-list">
    <ul id="bna" class="of">
      <li v-for="item in data.items" :key="item.id">
        <div class="cc-l-wrap">
          <section class="course-img">
            <img
              :src="item.cover"
              class="img-responsive course-image"
              alt="item.title"
            />
            <div class="cc-mask">
              <a
                :href="'/course/' + item.courseId"
                title="开始学习"
                class="comm-btn c-btn-1"
                >开始学习</a
              >
            </div>
          </section>
          <h3 class="hLh30 txtOf mt10">
            <a
              :href="'/course/' + item.id"
              :title="item.title"
              class="course-title fsize18 c-333"
              >{{ item.title }}</a
            >
          </h3>
          <h3 class="hLh30 txtOf mt10">
            <!-- 取消收藏 -->
            <a
              v-on:click="cancel(item.id)"
              class="course-title fsize18 c-333"
              href="#"
              style="color: orange"
              >取消收藏</a
            >
            <a
              v-on:click="top(item.id)"
              class="course-title fsize18 c-333"
              href="#"
              style="color: brown"
              >{{item.top === 1 ? '已置顶' : '置顶'}}</a
            >
          </h3>
          <section class="mt10 hLh20 of">
            <span v-if="Number(item.price) === 0" class="fr jgTag bg-green">
              <i class="c-fff fsize12 f-fA">免费</i>
            </span>
            <span class="fl jgAttr c-ccc f-fA">
              <i class="c-999 f-fA">{{ item.viewCount }}人学习</i>
              <i class="c-999 f-fA">课时 {{ item.lessonNum }}</i>
            </span>
          </section>
        </div>
      </li>
    </ul>

    <div class="clear" />

    <div class="paging">
      <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->

      <a
        :class="{ undisable: !data.hasPrevious }"
        href="#"
        title="首页"
        @click.prevent="gotoPage(1)"
        >首</a
      >

      <a
        :class="{ undisable: !data.hasPrevious }"
        href="#"
        title="前一页"
        @click.prevent="gotoPage(data.current - 1)"
        >&lt;</a
      >
      <a
        v-for="page in data.pages"
        :key="page"
        :class="{
          current: data.current == page,
          undisable: data.current == page,
        }"
        :title="'第' + page + '页'"
        href="#"
        @click.prevent="gotoPage(page)"
        >{{ page }}</a
      >
      <a
        :class="{ undisable: !data.hasNext }"
        href="#"
        title="后一页"
        @click.prevent="gotoPage(data.current + 1)"
        >&gt;</a
      >
      <a
        :class="{ undisable: !data.hasNext }"
        href="#"
        title="末页"
        @click.prevent="gotoPage(data.pages)"
        >末</a
      >
      <div class="clear" />
    </div>
  </article>

  <!-- /数据列表 结束-->
</template>

<script>
import index from "@/api/index";
import courseRequest from "@/api/course";
import { Message } from "element-ui";
export default {
  data() {
    return {
      page: 1,
      data: {},
      subjectNestedList: [], //一级分类列表
      subjectList: [], //二级分类列表
      searchObj: {}, // 查询表单对象
      oneIndex: -1,
      twoIndex: -1,
      buyCountSort: "",
      gmtCreateSort: "",
      priceSort: "",
    };
  },
  created() {
    this.initCourse(); //加载课程列表
  },
  methods: {
    initCourse() {
      this.gotoCollectPage(this.page);
    },
    /**分页查询 */
    gotoCollectPage(page) {
      this.page = page;
      courseRequest.getCollectList(page, 8).then((response) => {
        this.data = response.data.data;
      });
    },
    // 取消收藏
    cancel(id) {
      courseRequest.cancelCollect(id).then((response) => {
        if (response.data.success) {
          Message({
            message: "取消收藏成功",
            type: "success",
            duration: 1000,
          });
          this.initCourse();
        }
      });
    },
    top(id) {
      courseRequest.setTop(id).then((response) => {
        if (response.data.success) {
          Message({
            message: "置顶成功",
            type: "success",
            duration: 1000,
          });
          this.initCourse();
        }
      });
    },
  },
};
</script>

<style scoped>
.active {
  background: #bdbdbd;
}
.hide {
  display: none;
}
.show {
  display: block;
}
.course-image {
  width: 600px;
  height: 190px;
}
</style>
